<template>
  <div>
    <el-form ref="authorizeFormRef" :model="authorizeForm" label-width="auto">
      <el-form-item
        label="账号名称"
        prop="name"
        :rules="[
          {
            required: true,
            message: '请输入账号名称',
            trigger: 'blur',
          },
        ]"
      >
        <el-input v-model="authorizeForm.name" placeholder="账号名称" />
      </el-form-item>
      <el-form-item
        label="区域"
        prop="region"
        :rules="[
          {
            required: true,
            message: '请选择区域',
            trigger: 'change',
          },
        ]"
      >
        <el-select v-model="authorizeForm.region" placeholder="区域" @change="onRegionChange">
          <el-option v-for="ite in regionOption" :key="ite.value" :label="ite.label" :value="ite.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="站点" prop="marketplaces" v-if="authorizeForm.region">
        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="onCheckAllChange"> 全选 </el-checkbox>
        <div class="w-full"></div>
        <el-checkbox-group v-model="authorizeForm.marketplaces" @change="onCheckedMarketplaceChange">
          <el-checkbox v-for="ite in marketplaceOption" :key="ite.value" :label="ite.label" :value="ite.value"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

<!--      <el-form-item-->
<!--        label="应用ID"-->
<!--        prop="name"-->
<!--        :rules="[-->
<!--          {-->
<!--            required: true,-->
<!--            message: '请输入应用ID',-->
<!--            trigger: 'blur',},]">-->
<!--        <el-input v-model="authorizeForm.appId" placeholder="应用ID" />-->
<!--      </el-form-item>-->
<!--      <el-form-item-->
<!--        label="客户端ID"-->
<!--        prop="name"-->
<!--        :rules="[-->
<!--          {-->
<!--            required: true,-->
<!--            message: '请输入客户端ID',-->
<!--            trigger: 'blur',},]">-->
<!--        <el-input v-model="authorizeForm.clientId" placeholder="客户端ID" />-->
<!--      </el-form-item>-->
<!--      <el-form-item-->
<!--        label="客户端密钥"-->
<!--        prop="name"-->
<!--        :rules="[-->
<!--          {-->
<!--            required: true,-->
<!--            message: '请输入客户端密钥',-->
<!--            trigger: 'blur',},]">-->
<!--        <el-input v-model="authorizeForm.clientSecret" placeholder="客户端密钥" />-->
<!--      </el-form-item>-->
    </el-form>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { FormInstance, CheckboxValueType, ElMessage } from 'element-plus'
import { preStoreAuthorize, storeAuthorize } from '@/api/common'
import { HttpAsk } from '@/plugins/util/axios'

interface AuthorizeForm {
  name: string
  region: string
  marketplaces: string[]
}
const authorizeFormRef = ref<FormInstance>()
const regionOption = ref<any>([])
const marketplaceOption = ref<any>([])
const checkAll = ref(false)
const isIndeterminate = ref(false)
const authorizeForm = ref<AuthorizeForm>({
  name: '',
  region: '',
  marketplaces: [],
})

const onRegionChange = () => {
  marketplaceOption.value = regionOption.value.find((item) => item.value === authorizeForm.value.region).children
}

const onCheckAllChange = (val: CheckboxValueType) => {
  authorizeForm.value.marketplaces = val ? marketplaceOption.value.map((ite) => ite.value) : []
  isIndeterminate.value = false
}
const onCheckedMarketplaceChange = (value: CheckboxValueType[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === marketplaceOption.value.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < marketplaceOption.value.length
}

defineExpose({
  async onConfirm() {
    const isValid = await new Promise((resolve) => {
      authorizeFormRef.value?.validate((valid) => {
        resolve(valid)
      })
    })
    if (isValid) {
      const res = await storeAuthorize(authorizeForm.value)
      if (res.code === HttpAsk.SUCCESS) {
        window.open(res.data.authorizeUrl, '_blank')
        ElMessage.success('操作成功')
      }
    } else {
      throw new Error('表单验证失败')
    }
  },
})

onMounted(() => {
  preStoreAuthorize().then((res) => {
    regionOption.value = res.data.options
  })
})
</script>

<style scoped lang="scss"></style>
